import { Modal, Button } from '@douyinfe/semi-ui';
import styles from './index.module.scss';

/**
 * 基础模态框组件
 * @param {Object} props
 * @param {boolean} props.visible - 是否可见
 * @param {Function} props.onCancel - 取消回调
 * @param {Function} props.onConfirm - 确认回调
 * @param {string} props.title - 标题
 * @param {React.ReactNode} props.footerContent - 自定义底部内容
 * @param {React.ReactNode} props.children - 模态框内容
 * @param {Object} props.modalProps - 传递给Semi Modal的额外属性
 */
function BaseModal({ 
  visible, 
  onCancel, 
  onConfirm, 
  title, 
  footerContent, 
  children,
  closable = true,
  modalProps = {} 
}) {
  const { className, ...restModalProps } = modalProps;
  return (
    <Modal
      title={title}
      closable={closable}
      visible={visible}
      width={modalProps.width || 1216}
      height={modalProps.height || 792}
      centered
      onCancel={onCancel}
      className={[styles.baseModal, className, modalProps.nofooter ? styles.nofooter : null]
        .filter(Boolean)
        .join(' ')}
      footer={
        footerContent || (
          <div className={styles.modalButtonGroup}>
            <Button onClick={onCancel} className={`${styles.button} button buttonDefault`}>
              取消
            </Button>
            <Button onClick={onConfirm} className={`${styles.button} button buttonPrimary`}>
              确认
            </Button>
          </div>
        )
      }
      {...restModalProps}>
      {children}
    </Modal>
  );
}

export default BaseModal;